<template>
	<view class="news-page">
		<!-- 导航栏 -->
		<!-- #ifndef MP-WEIXIN -->
		<free-nav-bar textContent="消息"></free-nav-bar>
		<!-- #endif -->
		<view class="container">
			<view class="head flex" id="head">
				<view class="top-list flex" v-for="(item, index) in topList" :key="index">
					<view class="item">
						<template v-if="index == 0">
							<view class="icon sprite-logistics" @click="chooseHandle(item)">
								<uni-badge class="uni-badge-right-margin" :text="item.num" absolute="rightTop" size="normal">
									
								</uni-badge>
							</view>
							<view class="text main-text-color"><text>{{item.title}}</text></view>
						</template>
						<template v-else >
							<view class="icon sprite-notice" @click="chooseHandle(item)">
								<uni-badge class="uni-badge-right-margin" :text="item.num" absolute="rightTop" size="normal">
									
								</uni-badge>
							</view>
							<view class="text main-text-color"><text>{{item.title}}</text></view>
						</template>
					</view>
				</view>
			</view>
			<view class="body">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view class="list-item flex" v-for="(item, index) in listData" :key="index" @click="readHandle(item)">
						<uni-badge class="uni-badge-right-margin" :text="item.readStatus ? 0:1" :is-dot="true" absolute="rightTop" size="normal">
							<view class="avatar">
								<image class="img" v-if="item.msgType == 1" src="http://oss.town168.com/oss/web/icon/logistics.png"></image>
								<image class="img" v-else src="http://oss.town168.com/oss/web/icon/notice.png"></image>
							</view>
						</uni-badge>
						<view class="info">
							<view class="info-top flex">
								<view class="name main-text-color">{{item.content}}</view>
								<view class="timer">
									<uni-dateformat :date="item.createTime" :format="'yyyy-MM-dd hh:mm:ss'"></uni-dateformat>
								</view>
							</view>
							<view class="text"><text>{{item.text}}</text></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import $U from '@/common/free-lib/util.js';
	import $H from '@/common/free-lib/request.js';
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				phoneHeight: 0, //屏幕可用高度
				topHeight: 0, //滑块上方高度
				bottomHeight: 0, //底部高度
				scrollerHeight: "",
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				topList: [
					{
						icon: 'sprite-logistics',
						title: '物流信息',
						msgType: 1,
						num: 0
					},
					{
						icon: 'sprite-notice',
						title: '服务通知',
						msgType: 0,
						num: 0
					}
				],
				listData: [],
				queryForm: {
					msgType: undefined,
					pageNo: 1,
					pageSize: 10
				}
			}
		},
		onLoad(e) {
			this.initData();
			this.$store.commit('initHome');
			console.log('消息中心');
		},
		onReady() {
			var height
			var _this = this;
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		_this.phoneHeight = res.windowHeight;
			// 		//console.log("phoneHeight:" + res.windowHeight)
			// 		let view = uni.createSelectorQuery().select("#foot"); //局部滑块
			// 		view.boundingClientRect(data => {
			// 			_this.topHeight = data.height;
			// 			height = _this.phoneHeight - _this.topHeight - 44 - 50;
			// 			// //console.log("topHeight:"+data.height)
			// 			// let otherview = uni.createSelectorQuery().select("#foot");
			// 			// otherview.boundingClientRect(data => {
			// 			// 	_this.bottomHeight = data.height
			// 			// 	//console.log("bottomHeight:"+data.height)
			// 			// 	height = _this.phoneHeight - _this.topHeight - _this.bottomHeight;
			// 			// 	//console.log("scrollerHeight:"+height)
			// 			// }).exec();
			// 		}).exec();
			// 	},
			// }); 
			// this.scrollerHeight = height;
		},
		computed: {
		},
		methods: {
			initData() {
				let _this = this;
				$H.get('/member/msg/getUnread').then(res => {
					if(res) {							
						_this.topList[0].num = res.logisticsMsg;
						_this.topList[1].num = res.sysMsg;
					}
				})
			},
			getMsgList(item) {
				let _this = this;
				this.queryForm.msgType = item.msgType;
				$H.get('/member/msg/getList', this.queryForm).then(res => {
					console.log(res.list)
					if(res && res.list) {
						if(_this.listData.length == 0) {
							_this.listData= res.list;
						}
						else {
							_this.listData.concat(res.list);
						}
					}
				})
				item.num = 0;
			},
			readHandle(item) {
				console.log(item.id);
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			chooseHandle(item) {
				uni.navigateTo({url: '/pages/news/message?msgType=' + item.msgType});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news-page {
		.container {
			#head {
				height: 196rpx;
				background: #fff;
				margin-bottom: 16rpx;
				border-top: 1px solid #F9F9F9;
			}
			.top-list {
				width: 25%;
				justify-content: center;
				align-items: center;
				
				.icon {
					margin: 0 auto;
				}
				
				.text {
					display: block;
					height: 40rpx;
					line-height: 40rpx;
					margin-top: 10rpx;
				}
			}
			.list-item {
				padding: 30rpx;
				background: #fff;
				align-items: center;
				
				.avatar {
					width: 90rpx;
					height: 90rpx;
					border-radius: 200px;
					overflow: hidden;
					
					.img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				.info {
					margin-left: 13rpx;
					flex: 1;
					.info-top {
						justify-content: space-between;
					}
					.name {
						font-size: 28rpx;
						line-height: 40rpx;
					}
					.text {
						font-size: 26rpx;
						line-height: 37rpx;
						color: #878787;
						margin-top: 3px;
					}
				}
				.timer {
					font-size: 26rpx;
					line-height: 37rpx;
					color: #878787;
				}
			}
		}
	}
</style>
